import { Component, Input, ViewChild, ElementRef } from '@angular/core';
import { Http } from '@angular/http';
import { ActivatedRoute } from '@angular/router';
import { environment } from '../../../../../environments/environment';

//Base component
import { RiskBaseComponent } from '../../../../shared/components/riskBase.component';
//Services
import { CompanyRiskService } from '../../../companyRisk.service';
import { AnalyticsService } from '../../../../shared/services/analytics.service'
//Models
import { GoogleAnalyticsBeacon } from '../../../../models/googleAnalytics.beacon'

@Component({
    selector: 'event-details',
    templateUrl: './eventDetails.component.html',
    styleUrls: ['./eventDetails.component.css']
})
export class EventDetailsComponent extends RiskBaseComponent {
    private sub: any;
    public expanded: boolean = false;
    public readonly resourcesUrl: string = environment.resourcesUrl;
    public indicator: any;
    public locations: any[];
    public columns: any[];

    @Input() eventIndicator: any;
    @Input() eventIndex: number;
    @Input() companyId: string;
    @Input() showAxis: boolean;
    @Input() noExpand: boolean;
    @ViewChild('panelLink') panelLink: ElementRef;

    @Input() set defaultExpanded(value: boolean) {
        if (value == true) {
            //wait till event is rendered before expanding it
            setTimeout(() => {
                this.clickToToggle();
            });
        }
    }

    constructor(
        private route: ActivatedRoute,
        private riskService: CompanyRiskService,
        private analyticsService: AnalyticsService,
        private http: Http) {
        super(http);
    }

    ngOnInit() {
        this.columns = [
            {
                name: 'Raw Score',
                percentWidth: 20,
                maxRating: 100,
                valueField: 'score',
                highlight: false,
                chartColor: '#B3D4D1',
                showRating: true,
                boldRating: false,
                showChart: false,
                ratingUnit: '',
                decimals: 0
            },
            {
                name: 'Weight',
                percentWidth: 20,
                maxRating: 100,
                valueField: 'weight',
                highlight: false,
                chartColor: '#B5B7B7',
                showRating: true,
                boldRating: false,
                showChart: false,
                ratingUnit: '%',
                decimals: 2
            },
            {
                name: 'Weighted Score',
                percentWidth: 30,
                maxRating: 100,
                valueField: 'weightedScore',
                highlight: false,
                chartColor: 'black',
                showRating: true,
                boldRating: true,
                showChart: false,
                ratingUnit: '',
                decimals: 0
            }
        ];
    }

    public clickToToggle(): void {
        if (this.noExpand !== true) {
            this.panelLink.nativeElement.click();
        }
    }

    public collapseToggle(): void {
        this.expanded = !this.expanded;
        if (this.expanded) {
            //GoogleAnalytics Beacon
            this.analyticsService.sendBeacon(new GoogleAnalyticsBeacon('ESG RR Events', 'ESG Risk Rating', { CompanyId: this.companyId, EventIndicatorName: this.eventIndicator.name }));

            if (this.indicator == undefined) {
                this.riskService.getEventsByCode(this.companyId, this.eventIndicator.code).then((data) => {
                    this.indicator = data;
                });

                this.riskService.getLocationByEventCode(this.companyId, this.eventIndicator.code).then((data) => {
                    this.locations = data;
                });
            }
        }
    }
}